<template>
	<view class="register">
		<view class="register_title">
			<text>注册</text>
		</view>
		<!-- <view :class="[{nameFocus:alltrue},'register_user']"> -->
			<input type="text" placeholder="用户ID（字母或数字)" @input="bindUsername" @focus="onFocusName" @blur="onBlurName"/>
		<!-- </view> -->
		<!-- <view :class="[{psdFocus:alltrue},'register_pwd']"> -->
			<input type="text" password placeholder="用户密码" @input="bindPassword" @focus="onFocusPsd" @blur="onBlurPsd"/>
		<!-- </view> -->
		<view class="register_btn">
			<button @click="register">注册</button>
		</view>
		<view class="register_back" @click="tologin">
			返回登录
		</view>
	</view>
	
</template>

<script>
	let WebIM = require("../../utils/WebIM")["default"];
	export default{
		data(){
			return{
				username: "",//fishhu  fishha
				password: "",//1q2w3e4r
				alltrue:true
			}
		},
		onLoad: function(){
			// let app = getApp();
			// new app.ToastPannel.ToastPannel();
		},
		methods:{
			tologin(){
				console.log(111)
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			bindUsername: function(e){
				this.username = e.detail.value
			},
			bindPassword: function(e){
				this.password = e.detail.value
			},
			onFocusPsd: function(){
				this.psdFocus = 'psdFocus'
			},
			onBlurPsd: function(){
				this.psdFocus = ''
			},
			onFocusName: function(){
				this.nameFocus = 'nameFocus'
			},
			onBlurName: function(){
				this.nameFocus = ''
			},
			register: function(){
				console.log(getApp())
				const that = this;
				if(that.username == ""){
					uni.showToast({
						title: '请输入用户名！',
						duration: 2000
					});
					return 
				}
				else if(that.password == ""){
					uni.showToast({
						title: '请输入密码！',
						duration: 2000
					});
					return 
				}
				else{
					var options = {
						apiUrl: WebIM.config.apiURL,
						username: that.username.toLowerCase(),
						password: that.password,
						nickname: "",
						appKey: WebIM.config.appkey,
						success: function(res){
							console.log('注册成功', res)	
							uni.showToast({
								title:'注册成功'
							})
							var data = {
								apiUrl: WebIM.config.apiURL,
								user: that.username.toLowerCase(),
								pwd: that.password,
								grant_type: "password",
								appKey: WebIM.config.appkey
							};
							uni.setStorage({
								key: "myUsername",
								data: that.username
							});
						},
						error: function(res){
							console.log('注册失败', res)	
							if (res.statusCode == '400' && res.data.error == 'illegal_argument') {
								uni.showToast({
									title: '用户名非法！',
									duration: 2000
								});
								return 
							}
							uni.showToast({
								title: '用户名已被占用！',
								duration: 2000
							});
						}
					};
					WebIM.conn.registerUser(options);
				}
			}
		}
	}

	
</script>

<style>
	.register {
		width: 100%;
		height: 100%;
		background-color: #ffffff;
	}
	.register_title {
		height: 128rpx;
		padding-left: 32rpx;
	}
	.register_title text{
		font-size: 64rpx;
		font-weight: 400;
		line-height: 96rpx;
	}
	
	.register_user, .register_pwd, .register_btn {
		display: flex;
	}
	.register_user input, .register_pwd input {
		height: 96rpx;
		background-color: #ffffff;
		border: 2rpx solid #999999;
		border-radius: 8rpx;
		box-sizing: border-box;
		padding: 0 32rpx;
		font-size: 34rpx;
		color: #000;
		margin: 0 64rpx;
		display: inline-block;
		flex: 1;
	}
	
	.nameFocus input, .psdFocus input{
		border: 3rpx solid #0873DE;
		box-sizing: border-box;
	}
	.register_user input {
		margin-top: 128rpx
	}
	.register_pwd input {
		margin-top: 32rpx;
	}
	.register_btn button{
		flex: 1;
		height: 96rpx;
		margin: 32rpx 64rpx 0;
		border-radius: 8rpx;
		line-height: 96rpx;
		color: rgb(255,255,255);
		background-color: #0873DE;
		font-size: 34rpx;
	}
	.btn_hover {
		background-color: #137DCD;
	}
	.register_back {
		margin-top: 28rpx;
		padding: 0 64rpx;
		height: 34rpx;
	}
	.register_back navigator {
		font-size: 24rpx;
		color: #0873DE;
	}
	.navigator-hover{
		color: #2892FD;
		background-color: #fff;
	}
	.input-hover{
		border: 2rpx solid red;
	}
	
</style>
